<template>
  <gui-page>
    <!-- 页面主体 -->
    <template v-slot:gBody>
      <view>
        <form @submit="submit">
          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">联系信息</text>
          </view>
          <view style="height:28rpx;"></view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系人名称</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.contact" placeholder="联系人名称" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系电话</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.phone" placeholder="请输入联系电话" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">所在城市</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.city" @click="selectCity"
                  placeholder="请选择城市" />
              </view>
            </view>
          </view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">联系地址</text>
              <view class="gui-form-body">
                <input type="text" class="gui-form-input" v-model="formData.address" placeholder="请输入联系地址" />
              </view>
            </view>
          </view>



          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">宴席名称</text>
              <view class="gui-form-body">
                <input v-if="categorySelect !== undefined" type="text" class="gui-form-input" v-model="categorySelect"
                  @click="selectCategory" placeholder="请选择所属分类" />
                <input v-else type="text" class="gui-form-input" v-model="categorySelect" placeholder="请选择所属分类" />
              </view>
            </view>
          </view>

          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">宴席地点</text>
              <view class="gui-form-body">
                <picker @change="fwdxChange" :value="index" :range="fwdx_list">
                  <view class="gui-form-input">{{formData.shopType}}</view>
                </picker>
              </view>
            </view>
          </view>

          <view class="gui-margin-top gui-padding-x">
            <text class="gui-h6 gui-secondary-text">宴会信息</text>
          </view>
          <view style="height:28rpx;"></view>
          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">时间</text>
              <view class="gui-form-body">
                <gui-datetime @confirm="getDate" :value="formData.orderTime" :isTime="false">
                  <input type="text" class="gui-form-input" v-model="formData.orderTime" />
                </gui-datetime>
              </view>
            </view>
          </view>

          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
            <view class="gui-form-item gui-border-b">
              <text class="gui-form-label gui-secondary-text">宴席预算</text>
              <view class="gui-form-body">
                <picker v-if="showPicker" @change="amountChange" :value="index" :range="amountScope">
                  <view class="gui-form-input">{{formData.amount}}</view>
                </picker>
                <input v-else type="text" class="gui-form-input" v-model="formData.amount" placeholder="宴会预算" />
              </view>
            </view>
          </view>


          <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">

            <view style="padding:15rpx 0;">
              <textarea v-model="formData.remark" placeholder="其他要求..."
                class="gui-textarea gui-bg-gray gui-dark-bg-level-1 gui-padding" style="width:690rpx;"></textarea>
            </view>

          </view>
          <view class="gui-margin-top gui-flex gui-row gui-nowrap gui-justify-content-end gui-padding-x">
            <button type="default" class="gui-button gui-bg-orange gui-noborder" style="width:100%;" formType="submit">
              <text class="gui-icons gui-color-white gui-button-text">发布需求</text>
            </button>
          </view>
          <view style="height:60rpx;"></view>
        </form>
      </view>
    </template>
  </gui-page>
</template>
<script>
  export default {
    data() {
      return {
        // 表单数据存储
        formData: {
          shopType: '请选择',

        },

        shopIndex: 0,
        shops: [
          "请选择店铺"
        ],
        shopList: [],
        square: [
          "请选择专场", "普通场", "清仓专场", "预售专场"
        ],
        squareIndex: 0,
        categorySelect: '请选择',
        avater: '',
        video: '',
        xq1: '',
        xq2: '',
        fwdx_list: ['自家', '酒店'],
        index: 0,
        showPicker: true,
        amountScope: ['3万一下', '3-5万', '5-8万', '8-12万', '12-18万', '18-30万', '30-100万', '100万以上', '自定义价格'],
      }
    },
    onLoad(e) {
      var user = uni.gRequest.checkLogin();
      console.log("user:", user)
      if (user) {
        this.formData.userId = user.userId;
      }

      let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth() + 1; // 月份从0开始计算，需要加1
      let day = today.getDate();
      this.formData.orderTime = year + '-' + month + '-' + day;

    },
    onShow() {
      var selectCity = uni.getStorageSync("selectCity");
      if (selectCity) {
        this.formData.city = selectCity;
        uni.removeStorageSync("selectCity")
      }

      var selectCategory = uni.getStorageSync("selectCategory");
      if (selectCategory) {
        this.formData.orderType = selectCategory.id;
        this.categorySelect = selectCategory.categoryName;
        uni.removeStorageSync("selectCategory")
      }



    },
    methods: {
      getDate(res) {
        this.formData.orderTime = res[0] + '-' + res[1] + '-' + res[2];
      },
      fwdxChange(e) {
        this.formData.shopType = this.fwdx_list[e.detail.value]
      },

      // 表单提交
      submit: function(e) {

        if (!this.formData.contact) {
          uni.showToast({
            title: "请填写联系人名称",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.phone) {
          uni.showToast({
            title: "请填写联系电话",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.city) {
          uni.showToast({
            title: "请选择城市",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.address) {
          uni.showToast({
            title: "请填写联系地址",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.orderType) {
          uni.showToast({
            title: "请选择分类",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.shopType) {
          uni.showToast({
            title: "请选择服务类型",
            icon: 'none'
          });
          return;
        }

        if (!this.formData.amount) {
          uni.showToast({
            title: "宴会预算",
            icon: 'none'
          });
          return;
        }

        if (!this.formData.userId) {
          uni.showToast({
            title: "请先登录",
            icon: 'none'
          });
          return;
        }


        uni.gRequest.post("order", JSON.stringify(this.formData)).then(x => {

          uni.showToast({
            title: "提交成功、请等待管理员审核"
          });

          uni.navigateBack();
        });
      },
      selectCity() {
        uni.navigateTo({
          url: '/pages/com/selectCity'
        })
      },
      selectCategory() {
        uni.navigateTo({
          url: '/pages/com/selectCaptory'
        })
      },
      amountChange(e) {
        console.log(e.detail.value);
        console.log(this.amountScope.length - 1);
        if (e.detail.value == (this.amountScope.length - 1)) {
          return this.showPicker = false
        }
        this.formData.amount = this.amountScope[e.detail.value]
      }
    }
  }
</script>
<style scoped>
  .gui-idcard-main {
    margin: 25rpx;
  }

  .gui-idcard-desc {
    line-height: 56rpx;
    font-size: 26rpx;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .gui-idcard-text {
    line-height: 1.8em;
    margin-top: 30rpx;
  }

  .gui-idcard-items {
    padding: 50rpx;
    border-radius: 10rpx;
    margin-top: 15rpx;
  }

  .gui-idcard-items-image {
    width: 380rpx;
  }
</style>
